<template>
  <div class="homeProject-wrapper">
    <ul class="project-list">
        <li class="project-item "  @mouseenter= 'mouseChange(1, "collegeLeft", "collegeRight")' @mouseleave = 'mouseChange(0, "collegeLeft", "collegeRight")'>
            <img  class="gif" src="/img/home/college-white.png" alt="">
            <h3 class="title">国科教育</h3>
            <p class="text">国科教育是国科科技IT人才培养基地，培养对象包括在校学生及在职人员，培养方向包括ICT技术、软件开发、移动互联网、信息安全、人工智能、大数据、动漫影视等，覆盖了泛IT行业的各大主要领域。</p>
            <div class="check-wrapper college" @click="goto('https://campus.goktech.cn/')">
              <p class="check-text">
                <span>查看详情</span>
                <i ref="collegeLeft" class="left frame"></i>
                <i ref="collegeRight" class="right frame"></i>
              </p>
            </div>
        </li>
        <li class="project-item" @mouseenter= 'mouseChange(1, "itemLeft", "itemRight")' @mouseleave = 'mouseChange(0, "itemLeft", "itemRight")'>
            <img class="gif" src="/img/home/ICT-black.png" alt="">
            <h3 class="title">人才运营</h3>
            <p class="text">国科聚焦产教融合，打造国科特有的“教育+产业服务的人才供应链”模式，通过国科人才运营中心，提供专业的人才服务。国科人才运营中心创建了完善的就业服务体系，为大学生和职场小白提供专业的就业指导，提升学生就业应聘竞争力。</p>
            <div class="check-wrapper" @click="goto('https://job.goktech.cn/')">
              <p class="check-text">
                <span>查看详情</span>
                <i ref="itemLeft" class="left frame"></i>
                <i ref="itemRight" class="right frame"></i>
              </p>
            </div>
        </li>
        <li class="project-item" @mouseenter= 'mouseChange(1, "internetLeft", "internetRight")' @mouseleave = 'mouseChange(0, "internetLeft", "internetRight")'>
            <img  class="gif" src="/img/home/inter-white.png" alt="">
            <h3 class="title">集客服务</h3>
            <p class="text">集客服务提供设计、开发、测试、运维、运营、编辑等项目资源和人才资源，为企业、软件公司和软件开发人才提供一个可信IT服务众包平台。</p>
            <div class="check-wrapper internet"  @click="goto('http://www.jikeserv.com/')">
              <p class="check-text">
                <span>查看详情</span>
                <i ref="internetLeft" class="left frame"></i>
                <i ref="internetRight" class="right frame"></i>
              </p>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    mouseChange(sign, leftObj, rightObj){

        let frameLeft = this.$refs[leftObj]
        let frameRight = this.$refs[rightObj]
        
        if(sign == 1 ){
            frameRight.style.opacity = 1
            frameLeft.style.opacity = 1
        } else {
            setTimeout(()=>{
            frameRight.style.opacity = 0
            frameLeft.style.opacity = 0
            }, 200)
        }
      
    },
    goto (path){
        window.open(path,"_blank")
    }
  },
}
</script>

<style lang="stylus" scoped>
// @import '~style/reset.styl';
.homeProject-wrapper{
    width: 100%;
    height: 716px;
    background: url('/img/home/erbeijing.png') no-repeat;
    background-size: cover;
    @media (min-width: 1640px){
        height: 947px;
    }
    .project-list{
        // @extend .clear-fix;
        width: 1200px;
        padding-top: 153px;
        margin: auto;
        text-align: center;
        @media (min-width: 1640px){
            width: 1480px;
            padding-top: 212px;
        }
        .project-item{
            float: left;
            position: relative;
            width: 356px;
            height: 468px;
            padding-top: 60px;
            background-color: RGBA(0, 0, 0, .5);
            color: #fff;
            cursor: pointer;
            @media (min-width: 1640px){
                width: 440px;
                height: 580px;
                padding-top: 100px;
            }

            .gif{
                width: 36px;
                height: 36px;   
            }
            .title{
                margin: 33px 0 27px;
                font-family:MicrosoftYaHei-Bold;
                font-size: 22px;
                font-weight: bold; 
            }

            .text{
                width: 266px;
                margin: auto;
                font-size: 14px;
                line-height: 25px;
                // line-height: 34px;
                color: rgba(245, 245, 245, 1);
            }

            .check-wrapper{
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 100px;
                background-color: #FF2758; 
                font-size: 18px;
                font-family:MicrosoftYaHei-Bold;
                font-weight: bold;
                transition: all 0.25s;
                @media (min-width: 1640px){
                    height: 124px;
                }
                

                .check-text{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 120px;
                    height: 44px;
                    line-height: 44px;
                    margin: -22px 0 0 -60px;

                    .frame{
                        position: absolute;
                        top: 10px;
                        left: 40px;
                        width: 20px;
                        height: 20px;
                        border: 2px solid rgba(255, 255, 255, 0);
                        // transition: all 0.25s cubic-bezier(0,1.82,.57,1.58);
                        transition: all 0.2s;
                        opacity: 0;
                    }
                    .frame.left{
                        border-right: 0;
                    }
                    .frame.right{
                        left: 58px;
                        border-left: 0;
                    }

                }
            }
            .internet{
                background-color: #1457FD;
            }

            .college{
                background-color: #FF6252;  
            }

            &:hover .check-text .right{
                width: 60px;
                height: 40px;
                top: 0px;
                border-color: rgba(255, 255, 255, 1);
            }

            &:hover .check-text .left{
                left: -2px;
                width: 60px;
                height: 40px;
                top: 0px;
                border-color: rgba(255, 255, 255, 1);
            }

            &:hover .check-wrapper{
                height: 130px;
                @media (min-width: 1640px){
                    height: 160px;
                }  
            }

            
        }
        .project-item + .project-item{
            margin-left: 66px;
            @media (min-width: 1640px){
                margin-left: 80px;
            }
        }

    }
}
</style>
